<template>
	<div class="search-company">
		<div class="content" v-if="listStatus != 0">
			<p class="title">
				已为您搜索到<span class="count">{{ total }}条</span>与<span class="keyword">{{ keyword }}</span>相关的企业
			</p>

			<div class="list">
				<div class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.mer_id)">
					<img :src="item.mer_avatar || noPic" alt="" class="pic">
					<div class="name transition">{{ item.mer_name }}</div>
					<div class="achieves">
						<span class="certifi">
							<img src="~/assets/images/certifi.png" alt="">
							已认证
						</span>
						<span class="time">
							<img src="~/assets/images/settle.png" alt="">
							入驻{{ item.settle_time }}
						</span>
					</div>
				</div>
			</div>
			<nodata message="暂无数据" :status="listStatus"></nodata>
			<m-pagination :pagination="total" :page-size="limit" @changePage='changeThisPage' />
		</div>

		<not-found v-else />
	</div>
</template>

<script>
import MPagination from '@/components/common/m-pagination/MPagination'
import NotFound from '@/views/search-company/NotFound'
import { getMerchantList } from '@/request/api'

export default {
	name: 'SearchCompany',
	components: {
		NotFound,
		MPagination
	},
	data() {
		return {
			list: [],
			page: 1,
			listStatus: 1,
			total: 0,
			limit: 5,
			keyword: '',
			mer_type: '',
			noPic: require("assets/images/nopic.jpg")
		}
	},
	created() {
		this.keyword = this.$route.params.keyword
		this.mer_type = this.$route.query.type
		this.getList()
	},
	methods: {
		getList() {
			this.listStatus = 1
			this.list = []
			let data = {
				limit: this.limit,
				page: this.page,
				mer_type: this.mer_type,
				keyword: this.keyword
			};
			getMerchantList(data).then(res => {
				this.list = res.data.data
				this.total = res.data.total
				if (this.total == 0) {
					this.listStatus = 0
				} else {
					this.listStatus = 2
				}
				window.scrollTo({top: 0})
			}).catch(err => {
				this.$message.error(err.message)
			})
		},
		changeThisPage(page) {
			this.page = page
			this.getList()
		},
		goDetail(id) {
			this.$router.push({ name: 'CompanyHomeHome', params: { id }})
		}
	}
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/style/common.scss";

	.search-company {
		padding-top: 50px;
		padding-bottom: 100px;
		display: flex;
		justify-content: center;
		background-color: rgb(245, 244, 249);

		.content {
			width: 1200px;
			background-color: #fff;
			padding: 30px;
			font-size: 16px;
			color: #666;

			.title {
				text-align: center;
				margin-top: 30px;
				margin-bottom: 60px;

				.count {
					color: $theme-color-1;
				}

				.keyword {
					color: $theme-color-1;
					font-weight: bold;
					font-size: 24px;
					margin: 0 10px;
				}
			}

			.list {
				margin: -10px;
				margin-bottom: 30px;

				.item {
					width: calc((100% - 80px)/4); 
					padding: 15px;
					background-color: rgb(243, 244, 247);
					margin: 10px;
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					font-size: 16px;
					cursor: pointer;
					.pic {
						width: 100%;
						height: 151px;
						margin-bottom: 15px;
					}

					.name {
						width: 100%;
						height: 42px;
						@include text-omitted(2);
						margin-bottom: 15px;
						text-align: left;
					}

					.achieves {
						width: 100%;
						display: flex;
						align-items: center;

						.certifi {
							display: flex;
							align-items: center;
							margin-right: 45px;

							img {
								margin-right: 10px;
							}
						}

						.time {
							display: flex;
							align-items: center;

							img {
								margin-right: 10px;
							}
						}
					}
				}
				.item:hover .name{
					color: $theme-color-1
				}
			}
		}
	}
</style>
